<#include "/WEB-INF/views/admin/common/layout/__formlayout.html">
<#assign pageCss>
<link rel="stylesheet" href="${ctx}/resource/validationengine/css/validationEngine.jquery.css">
<link rel="stylesheet" href="${ctx}/resource/jquery/css/multi-select.css">
</#assign>
<#assign pageScript>
<script type="text/javascript" src="${ctx}/resource/validationengine/js/jquery.validationEngine-en.js"></script>
<script type="text/javascript" src="${ctx}/resource/validationengine/js/jquery.validationEngine.js"></script>
<script type="text/javascript" src="${ctx}/resource/jquery/jquery.quicksearch.js"></script>
<script type="text/javascript" src="${ctx}/resource/jquery/jquery.multi-select.js"></script>
<script type="text/javascript">
	//fileInput is an HTML input element: <input type="file" id="myfileinput" multiple>
	var pullfiles = function() {
		// love the query selector
		var fileInput = document.querySelector("#file");
		var files = fileInput.files;
		// cache files.length 
		var fl = files.length;
		var i = 0;

		while (i < fl) {
			// localize file var in the loop
			var file = files[i];
			if (checkSuffix(file.name)) {
				$("#fileName").html(file.name);
				i++;
			} else {
				layer.msg('Please upload the correct excel file！', {
					icon : 5
				});
				i++;
			}
		}
	}

	function checkSuffix(str) {
		var strRegex = "(.csv|.xls|.xlsx)$"
		var re = new RegExp(strRegex);
		if (re.test(str.toLowerCase())) {
			return true;
		} else {
			return false;
		}
	}

	// set the input element onchange to call pullfiles
	document.querySelector("#file").onchange = pullfiles;

	$(function() {
		$("input[type=radio][name=radio]").change(function() {
			$("#others").toggle();
			var val = $('input:radio[name="radio"]:checked').val();
			$("#target_user").val(val);
		});

		$('#custom-headers').multiSelect({
			  selectableHeader: "<input type='text' class='search-input' autocomplete='off' placeholder=''>",
			  selectionHeader: "<input type='text' class='search-input' autocomplete='off' placeholder=''>",
			  afterInit: function(ms){
			    var that = this,
			        $selectableSearch = that.$selectableUl.prev(),
			        $selectionSearch = that.$selectionUl.prev(),
			        selectableSearchString = '#'+that.$container.attr('id')+' .ms-elem-selectable:not(.ms-selected)',
			        selectionSearchString = '#'+that.$container.attr('id')+' .ms-elem-selection.ms-selected';

			    that.qs1 = $selectableSearch.quicksearch(selectableSearchString)
			    .on('keydown', function(e){
			      if (e.which === 40){
			        that.$selectableUl.focus();
			        return false;
			      }
			    });

			    that.qs2 = $selectionSearch.quicksearch(selectionSearchString)
			    .on('keydown', function(e){
			      if (e.which == 40){
			        that.$selectionUl.focus();
			        return false;
			      }
			    });
			  },
			  afterSelect: function(){
			  	var selectedItem = [];
				 $("#custom-headers option:selected").each(function (){
				     selectedItem.push($(this).val());
				 });
				var selected = selectedItem.join(",");
				$("#target_user").val(selected);
			    this.qs1.cache();
			    this.qs2.cache();
			  },
			  afterDeselect: function(){
			   var selectedItem = [];
				 $("#custom-headers option:selected").each(function (){
				     selectedItem.push($(this).val());
				 });
				var selected = selectedItem.join(",");
				$("#target_user").val(selected);
			    this.qs1.cache();
			    this.qs2.cache();
			  }
			});

		function validate(formData, jqForm, options) {
			var selectedItem = [];
			 $("#custom-headers option:selected").each(function (){
			     selectedItem.push($(this).val());
			 });
			var selected = selectedItem.join(",");
			var t = $("#target_user").val();
			var flag = true;
			if(t =='' || (t == 'other' && selected == '')){
				flag = false;
				layer.msg("target user is required", {
					time : 1000,
					icon : 2
				});
			}
			
			var file = $("#fileName").html();
			if (file == '' || !flag) {
				return false;
			} else {
				layer.load(2);
				return true;
			}
		}

		$("#frm").ajaxForm(
				{
					dataType : "json",
					beforeSubmit : validate,
					success : function(result) {
						layer.closeAll('loading');
						if (result.isSuccess) {
							layer.msg(result.msg, {
								icon : 1,
								time : 1000,
								end : function() {
									//信息提示完成后关闭表单窗口
									var index = parent.layer
											.getFrameIndex(window.name); //先得到当前iframe层的索引
									parent.layer.close(index); //再执行关闭  
								}
							});
						} else {
							layer.alert(result.msg, {
								icon : 5
							});
						}
					},
					error : function(ret) {

					}
				});

	})
</script>
</#assign> <@formlayout>
<div class="row">
	<div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
		<div class="widget am-cf">
			<div class="widget-body am-fr">
				<form class="am-form tpl-form-border-form" id="frm" method="post"
					enctype="multipart/form-data"
					action="${ctx}/admin/sys/offer/upload/">
					<div class="am-form-group am-form-file">
						<div>
							<button type="button" class="am-btn am-btn-default am-btn-sm">
								<i class="am-icon-cloud-upload"></i> Select the file to upload
							</button>
							<p id="fileName"></p>
						</div>
						<input type="file" id="file" name="file">
					</div>
					
					<input id="target_user" type="hidden" name="target_user"
						value="all">
					<#if admin??>
					<div class="am-form-group">
						<label for="doc-ipt-file-2">target user</label>
						<div>
							<label class="am-radio-inline"> <input type="radio"
								name="radio" value="all" checked="checked">all
							</label> <label class="am-radio-inline"> <input type="radio"
								name="radio" value="other">other 
						</div>
					</div>
					<div id="others" class="am-form-group" style="display:none">
						<label for="click_url" class="am-form-label"></label>
						<div class="">
							<select id='custom-headers' multiple='multiple'  class="am-selected-text">
								<#list agents as agent>
									<option value="${agent.id}">${agent.name}</option>
								</#list>
							</select>
						</div>
					</div>
					</#if>
					
					
					<div class="am-form-group">
						<div class="am-u-sm-2">
							<button type="submit"
								class="am-btn am-btn-primary tpl-btn-bg-color-success "
								id="subBtn">submit</button>
						</div>
						<div class="am-btn-group">
									<a href="${ctx}/admin/sys/offer/downfile"
										class="am-btn am-btn-default am-btn-success" id="downloadExcel">
										<span class="am-icon-download"></span> download template
									</a>
								</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>
</@formlayout>

